<template>
  <div :class="className">
    <!-- style -->
    <div v-html="css"></div>
    <!-- 商品组 列表 -->
    <div style="width:100%" class="content" v-if="datas.style_set == '1'">
      <div class="top">
        <span class="my-point-color">我的{{ fun.getIntegralLang() }}</span>
        <span class="detail" @click="toDetailList">明细<i class="iconfont icon-icon_more icon" style="transform: scale(0.7);display:inline-block"></i></span>
      </div>
      <div class="bottom">
        <div class="point">{{ datas.credit1 || 0 }}</div>
        <button class="point-detail" @click="toDetail">{{ fun.getIntegralLang() }}详情</button>
      </div>
    </div>
    <div class="contenOne" v-if="datas.style_set == '2'">
      <div class="contenOne_top">
        <i class="iconfont icon-fanhui" @click="toBack" v-if="datas.back_button"></i>
        <div class="contenOne_top_logo"></div>
        <div class="contenOne_top_search" @click="toSearch">
          <i class="iconfont icon-a-icon_pressed"></i>
          <span class="searchTxt">搜索</span>
        </div>
        <div v-if="datas.member_logo" class="memberImg" @click="toMember"></div>
      </div>
      <div class="contenOne_bottom">
        <div class="point">{{ parseInt(datas.credit1) || 0 }}</div>
        <div class="myTxt" @click="toLink">
          我的{{ fun.getIntegralLang() }}
          <i class="iconfont icon-a-beizhu2"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import emptyImage from "../../assets/images/new_diy/image.png";
// 自定义样式
const css = function() {
  if (this.datas.preview_color) {
    const { member_logo,search_title_color, search_bg_color, head_sculpture_color, back_button_color, logo, preview_color, my_point_color, detail_color, point_detail_color, point_detail_bg } = this.datas;

    return `
        .component-${this.id} .content{
                background-color: ${preview_color.color};
                background-image: url(${preview_color.isColor == 2 ? preview_color.image : ""});
                background-size: 100% auto;
                background-position: center;
                height: 90px;
                border-radius: 10px;
                padding: 19px 15px;
                margin: 5px 12px;
        }
        .component-${this.id} .content .top .my-point-color{
                font-size:14px;
                color:${my_point_color};
                font-weight:500
        }
        .component-${this.id} .content .top .detail{
                font-size:14px;
                color:${detail_color};
                margin-left:4px
        }
        .component-${this.id} .content .top .detail .icon{
                font-size:10px;
                color:${detail_color};
        }
        .component-${this.id} .content .bottom .point{
                font-size:25px;
                color:${my_point_color};
                font-weight: bold;
        }
        .component-${this.id} .content .bottom .point-detail{
               padding:6px 12px;
               border-radius:25px;
               background-color: ${point_detail_bg};
               margin-top:4px;
               border:0;
               line-height:16px;
               color:${point_detail_color}
        }

        .component-${this.id} .contenOne{
                background-color: ${preview_color.color};
                background-image: url(${preview_color.isColor == 2 ? preview_color.image : ""});
        }
        .component-${this.id} .contenOne .contenOne_top_logo{
                width: 4.5rem;
                height: 1.5rem;
                background-image: url(${logo});
                background-size: 100% auto;
                background-position: center;
                margin:0 0.5rem;
                background-repeat: no-repeat;
        }
        .component-${this.id} .contenOne .icon-fanhui{
          color:${back_button_color};
        }
        .component-${this.id} .contenOne .memberImg{
          background-image: url(${member_logo ? member_logo : ""});
        }
        .component-${this.id} .contenOne .icon-geren1{
          color:${head_sculpture_color};
        }
        .component-${this.id} .contenOne .contenOne_top_search{
          color:${search_title_color};
          background:${search_bg_color};
        }
        .component-${this.id} .contenOne .contenOne_top_search .searchTxt{
          color:${search_title_color};
        }
        .component-${this.id} .contenOne .contenOne_bottom .point{
          color:${my_point_color};
          font-weight: bold;
        }
        .component-${this.id} .contenOne .contenOne_bottom .myTxt{
          color:${my_point_color};
        }
    `;
  }
};

export default {
  data() {
    return {
      emptyImage,
      searchValue: ""
    };
  },
  props: ["id", "datas", "styles", "languages"],
  computed: {
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    }
  },
  methods: {
    toDetail() {
      this.$router.push(this.fun.getUrl("integral_v2"));
    },
    toDetailList() {
      this.$router.push(this.fun.getUrl("integrallist"));
    },
    toLink() {
      if (this.datas.link.is_h5 == 1 && this.datas.link.link) {
        // 跳转设置的H5链接
        window.location.href = this.datas.link.link;
      }
    },
    toMember() {
      this.$router.push(this.fun.getUrl("member"));
    },
    toBack() {
      this.$router.go(-1);
    },
    toSearch(){
      this.$router.push(this.fun.getUrl("search"));
    }
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
// 默认
.component-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}
.content .bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  align-content: center;
}
.top {
  text-align: start;
}
.memberImg{
  background-size: 100% auto;
  background-position: center;
  width: 1.45rem;
  height: 1.45rem;
  margin-left: 0.69rem;
}
.contenOne {
  background-size: 100% auto;
  background-position: center;
  width: 100%;
  height: 10rem;
  padding-top: 1.66rem;
  .contenOne_top {
    display: flex;
    align-items: center;
    padding: 0 1.69rem 0 0.72rem;
    .van-search {
      padding: 0;
      // height: 2rem;
      background: transparent;
      .van-cell {
        // padding: 0;
      }
    }
    .icon-geren1 {
      margin-left: 0.69rem;
      font-size: 1.25rem;
    }
    .contenOne_top_search {
      width: 12.19rem;
      height: 2rem;
      border-radius: 1rem;
      display: flex;
      align-items: center;
      padding: 0 0.75rem;
      .icon-a-icon_pressed{
        margin-right: 0.25rem;
      }
    }
  }
  .contenOne_bottom {
    margin-left: 2.38rem;
    .icon-a-beizhu2{
      margin-left: 0.22rem;
    }
  }
  .contenOne_bottom .point {
    text-align: left;
    font-size: 2.13rem;
    line-height: 2.2rem;
    margin-top: 1rem;
    margin-bottom: 0.72rem;
  }
  .contenOne_bottom .myTxt {
    display: flex;
    align-items: center;
    font-size: 0.81rem;
  }
}
</style>
